<script setup lang="ts">

import { ref } from 'vue'
import {autograph} from '../../utils'
import {router} from "../../main.js";

const inputText = ref('')
const encryptedText = ref('')

function encryptText() {
  encryptedText.value =   autograph(inputText.value)
}

const onClickLeft = () => {
  router.push('/user')
}



</script>

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar class="nav-bar"
               title="MD5 加密"
  ></van-nav-bar>

  <img src="../../assets/最终返回键.png" class="back-btn" @click="onClickLeft" alt="">

<!--  居中展示-->
  <span class="md-show">MD5 加密</span>

  <div class="md-show-content">
    <input type="text" v-model="inputText" placeholder="请输入需要加密的文本">
    <button @click="encryptText">加密</button>
    <textarea v-model="encryptedText" placeholder="加密后的文本" cols="30" rows="10">
  </textarea>
  </div>




</template>

<style scoped>
h1{
  font-size: 18px;
  font-weight: bolder;
  font-family: STXingkai,serif  ;

}

.back-btn {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

.nav-bar {

  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

.md-show {

 /* 居中展示*/
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 40px;
  font-size: 36px;
  font-weight: bold;
  font-family: STXingkai,serif  ;
  height: 10%;

}

.md-show-content {
  width: 100%;
  height:calc(90% - 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E7%81%AB%E7%84%B0.gif");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 10px #888888;
  position: relative;
  z-index: 0;
}
</style>